<template>
  <div class="echarts-container">
    <el-row :gutter="20">
      <vab-chart-line title="折线图" />
      <vab-chart-bar title="柱状图" />
      <vab-chart-pie title="饼状图" />
      <vab-chart-scatter title="散点图" />
      <vab-chart-candlestick title="K线图" />
      <vab-chart-radar title="雷达图" />
      <vab-chart-treemap title="矩形树图" />
      <vab-chart-sunburst title="旭日图" />
      <vab-chart-funnel title="漏斗图" />
      <vab-chart-gauge title="仪表图" />
      <vab-chart-theme-river title="河流流向图" />
    </el-row>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import VabChartLine from './components/VabChartLine'
  import VabChartBar from './components/VabChartBar'
  import VabChartPie from './components/VabChartPie'
  import VabChartScatter from './components/VabChartScatter'
  import VabChartCandlestick from './components/VabChartCandlestick'
  import VabChartRadar from './components/VabChartRadar'
  import VabChartTreemap from './components/VabChartTreemap'
  import VabChartSunburst from './components/VabChartSunburst'
  import VabChartFunnel from './components/VabChartFunnel'
  import VabChartGauge from './components/VabChartGauge'
  import VabChartThemeRiver from './components/VabChartThemeRiver'

  export default defineComponent({
    name: 'Echarts',
    components: {
      VabChartLine,
      VabChartBar,
      VabChartPie,
      VabChartScatter,
      VabChartCandlestick,
      VabChartRadar,
      VabChartTreemap,
      VabChartSunburst,
      VabChartFunnel,
      VabChartGauge,
      VabChartThemeRiver,
    },
    data() {
      return {}
    },
    methods: {},
  })
</script>

<style lang="scss" scoped>
  .echarts-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .vab-card {
        height: 300px;

        .echarts {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
</style>
